<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<style type="text/css">
			.details{
				width: 100%;
			}
			.banner{
				width: 100%;
				font-size: 0;
			}
			body{
				margin: 0;
				background: #f5f5f5;
			}
			img{
				margin: 0;
				border: 0;
			}
			.price_content{
				width:100%;
				height: 80px;
				display: flex;
				background: #F87934;
			    line-height: 30px;
				align-items: center;
				justify-content: space-between;
				}
				.p_{
					font-size:20px;
					color: #fff;
					
				
				}
				.p_::after{
					content: '起';
					font-size: 12px;
				}
				.p_::before{
					content: '￥';
					font-size: 15px;
						padding-left: 10px;
				}
				.time_right{
					display: flex;
					align-items: center;
				}
				
				.shi{
					color: #fff;
					font-weight: 800;
					font-size: 18px;
					width: 35px;
					height: 35px;
					line-height: 35px;
					background: #000;
					border-radius: 10px;
					text-align: center;
					margin: 3px;
				}
				.price_left{
					height: 60px;
					}
					.jieri{
						color: #fff;
						padding-left: 10px;
					}
					.hd{
						font-size: 15px;
						padding-left: 30px;
					}
					.jieshao{
						width: 96%;
						margin: auto;
						background: #fff;
						height: 90px;
						display: flex;
						align-items: center;
						margin-top: 12px;
					}
					.titles{
						padding-left: 10px;
						font-weight: 800;
						font-size: 16px;
						line-height: 20px;
					}
					.bbxq{
						text-align: center;
						height: 30px;
						font-size: 14px;
						padding-top: 10px;
						}
						.img_details{
							font-size: 0;
						}
						.img_details>img{
							width: 100%;
							font-size: 0;
							
						}
						.bottom_bar{
							position: fixed;
							width: 100%;
							z-index: 1000;
							height: 50px;
							bottom: 0;
							border-top: 1px solid #ccc;
							background: #fff;
						}
						.bottom_bar_item{
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 50px;
							width: 100%;
						}
						.love{
							width: 45%;
							
							display: flex;
							align-items: center;
						}
						.love1{
							padding-left: 20px;
							text-align: center;
						}
						.bottom_bar_btn{
							width: 48%;
							display: flex;
							align-items: center;
							
						}
						.btn_l,.btn_r{
							width: 50%;
							height: 40px;
							font-size: 15px;
							line-height: 40px;
							text-align: center;
							color: #fff;
							border-radius: 20px 0 0 20px;
							background: #FDB304;
						}
						.btn_r{
						border-radius: 0px 20px 20px 0px;
						background: #FF7103;
							
						}
						.sc{
							font-size: 14px;
							color: #333;
						}
						.img_details>img:last-child{
							margin-bottom: 50px;
						}
		</style>
	</head>
	<body>
		<div class="details">
			<div class="banner">
				<img src="./fonts/phone1Details.jpg" style="width: 100%;height: 200px;">
			</div>
			<div class="price_content">
				<div class="price_left">
					<div class="jieri">
						3.8节
					</div>
					<span class="p_">
						2300元
					</span>
				</div>
				<div class="huodong">
					<div class="jieri hd">
					 距活动结束
					</div>
					<div class="time_right">
						
						<div class="shi">
							<span id="h">
								50
							</span>
						</div>
						<span id="">
							:
						</span>
						<div class="shi">
							<span id="m">34</span>
						</div>
						<span id="">
							:
						</span>
						<div class="shi">
							<span id="second">45</span>
						</div>
					</div>
				</div>
				
			</div>
			<div class="jieshao">
				<div class="titles">
					<span>分期免息Apple/苹果 iPhone 11全新未激活国行xsmax全网通xr手机x</span>
				</div>
			</div>
			<div class="bbxq">
				<span>宝贝详情</span>
			</div>
			<div class="img_details">
				<img src="fonts/p1.jpg" >
				<img src="fonts/p2.jpg" >
				<img src="fonts/p3.jpg" >
				<img src="fonts/p4.jpg" >
				<img src="fonts/p5.jpg" >
				<img src="fonts/p6.jpg" >
				<img src="fonts/p7.jpg" >
				<img src="fonts/p8.jpg" >
				
			</div>
			<div class="bottom_bar">
				<div class="bottom_bar_item">
					<div class="love">
						<div class="love1">
							<img src="fonts/love1.png" style="width: 20px;height: 20px;">
							<div class="sc">
								收藏
							</div>
						</div>
						<div class="love1">
							<img src="fonts/kefu.png" style="width: 20px;height: 20px;">
							<div class="sc">
								客服
							</div>
						</div>
					</div>
					
					
					<div class="bottom_bar_btn">
						<div class="btn_l">
							<span>加入购物车</span>
						</div>
						<div class="btn_r">
							<span>购买</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			
			function FreshTime()
			{
			    var endtime=new Date("2021/03/08,12:20:12");//结束时间
			    var nowtime = new Date();//当前时间
			    var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000); 
			    // d=parseInt(lefttime/3600/24);
			    h=ling(parseInt(lefttime/3600));
			    m=ling(parseInt((lefttime/60)%60));
			    s=ling(parseInt(lefttime%60));
			 
			    // document.getElementById("day").innerHTML=d;
				document.getElementById("h").innerHTML=h;
				document.getElementById("m").innerHTML=m;
				document.getElementById("second").innerHTML=s;
			    
			}
			    FreshTime();
			    var sh;
			    sh=setInterval(FreshTime,1000);
		function ling(h){
			if(h<10){
				h= '0'+h
			}
			return h;
		}
		</script>
	</body>
</html>
